import { Canvas, Controls, Meta } from '@storybook/blocks';

import * as CheckboxStories from './Checkbox.stories';

<Meta of={CheckboxStories}/>

# Checkbox多选框
多选框

## 基本使用
<Canvas of={CheckboxStories.Checkbox}/>
<Controls of={CheckboxStories.Checkbox}/>

## Checkbox组
<Canvas of={CheckboxStories.Group}/>
<Controls of={CheckboxStories.Group}/>

## API

### Checkbox
<table className="api-table">
    <thead>
    <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>className</td>
        <td>类名class</td>
        <td>string</td>
        <td>-</td>
    </tr>
    <tr>
        <td>name</td>
        <td>单选框的标识，一般配合group使用</td>
        <td>string</td>
        <td>-</td>
    </tr>
    <tr>
        <td>disabled</td>
        <td>是否禁用状态</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>初始是否选中</td>
        <td>boolean</td>
        <td>-</td>
    </tr>
    <tr>
        <td>value</td>
        <td>指定当前是否选中</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>indeterminate</td>
        <td>设置半选状态，此状态下value值不会被变更</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>onChange</td>
        <td>变化时的回调函数</td>
        <td>(checked: boolean) => void</td>
        <td>-</td>
    </tr>
    </tbody>
</table>

### Checkbox.Group
<table className="api-table">
    <thead>
    <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>options</td>
        <td>指定可选项，options有值的情况下，默认插槽不会生效</td>
        <td>`(string | {label: string, name: string, disabled?: boolean})[]`</td>
        <td>-</td>
    </tr>
    <tr>
        <td>disabled</td>
        <td>整组禁用</td>
        <td>boolean</td>
        <td>-</td>
    </tr>
    <tr>
        <td>onChange</td>
        <td>变化时的回调函数</td>
        <td>(checkedValues: (string)[]) => void</td>
        <td>-</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>默认选中的选项</td>
        <td>string[]</td>
        <td>-</td>
    </tr>
    <tr>
        <td>value</td>
        <td>指定选中的选项</td>
        <td>string[]</td>
        <td>-</td>
    </tr>
    </tbody>
</table>
